<template>
    <!-- 用户详情dialog -->
    <Dialog
        :layer="viewLayer"
        v-model:visible="viewLayer.show"
        @close="dialogClose"
    >
    <div class="view-detail">
        <div class="info">
            <p class="item">
                <span class="title">账号</span>
                <span>{{userInfo['userName']}}</span>
            </p>
            <p class="item">
                <span class="title">姓名</span>
                <span>{{userInfo['name']}}</span>
            </p>
            <p class="item">
                <span class="title">手机号</span>
                <span>{{userInfo['phone']}}</span>
            </p>
            <p class="item">
                <span class="title">教育ID</span>
                <span>{{userInfo['eduId']}}</span>
            </p>
            <p class="item">
                <span class="title">职位类型</span>
                <span>{{userInfo['positionTypeName']}}</span>
            </p>
            <p class="item">
                <span class="title">学校</span>
                <span>{{userInfo['school']}}</span>
            </p>
            <p class="item" style="flex-basis: 100%;">
                <span class="title">年级</span>
                <span>{{formatGrade(userInfo['stageSubjectGrades'])}}</span>
            </p>
            <p class="item" style="flex-basis: 100%;">
                <span class="title">学段学科</span>
                <span>{{formatStage(userInfo['stageSubjectGrades'])}}</span>
            </p>
        </div>
    </div>
    </Dialog>
</template>

<script>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted } from 'vue'
import Dialog from '@/components/dialogComp.vue'
import { useStore } from 'vuex'
import { formatTimestamp, grade2text, fmtStageName } from '@/lib/tools'
import noData from '@/components/no-data.vue'
import { 
    institutionList, 
    institutionAttrList, 
    institutionLevelList,
    institutionObj,
    institutionLevelObj,
    institutionAttrObj
} from '../../filter-data.js'
export default defineComponent({
    // name:'',
    components: {
        Dialog
        // noData
    },
    props: {
        userInfo: {
            type: Object,
            default: () => {}
        }
    },
    setup(props, context){
        const store = useStore()
        // 状态数据
        const state = reactive({
            institutionList,
            institutionAttrList,
            institutionLevelList,
            institutionObj,
            institutionLevelObj,
            institutionAttrObj,
            viewLayer: {
                show: false,
                title: '详情',
                width: '700px',
                showButton: false
            }
        })

        // 方法
        const fns = {
            formatStage(data){
                const subjects = data.filter(item => item.subjectList.length != 0)
                return subjects.length ? fmtStageName(subjects) : '-'
            },
            formatGrade(data){
                const grades = data.filter(item => item.gradeList.length != 0)
                return grades.length ? grade2text(grades) : '-'
            },
            // 格式化时间戳
            formatTime(time){
                return formatTimestamp(time, 'YYYY-MM-DD HH:mm:ss')
            },
            open(){
                state.viewLayer.show = true
            },
            // 弹窗关闭
            dialogClose(){
                state.userInfo = {}
            }
        }

        // 计算属性
        const computes = {}

        onMounted(() => {})

        return {
            ...toRefs(state),
            ...fns,
            ...computes,
            ...toRefs(props)
        }
    }
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .view-detail{
        // margin-left: 50px;
        .info{
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 50%;
                margin: 20px 0;
                display: inline-flex;
                align-items: flex-start;
                .title{
                    margin-right: 20px;
                    width: 60px;
                    text-align: right;
                }
                & span:last-child{
                    flex: 1;
                }
            }
        }
    }
 
</style>
